<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时客流分布</title>
<script src="echarts.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
	backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
		offset: 0,
		color: '#f7f8fa'
	}, {
		offset: 1,
		color: '#cdd0d5'
	}]),
	title: {
		text: '实时客流分布'
	},
	// legend: {
	//	 right: 10,
	//	 data: ['1990', '2015']
	// },
	dataZoom: [
		{
			type: 'slider',
			xAxisIndex: [0],
		},
		{
			type: 'inside',
			xAxisIndex: [0],
		},
		{
			type: 'slider',
			yAxisIndex: [0],
		},
		{
			type: 'inside',
			yAxisIndex: [0],
		}
	],
	xAxis: {
		splitLine: {
			lineStyle: {
				type: 'dashed'
			}
		},
		min: -200,
		max: 200,
	},
	yAxis: {
		splitLine: {
			lineStyle: {
				type: 'dashed'
			}
		},
		min: -200,
		max: 200,
	},
	series: [{
		data: [],
		type: 'scatter',
		symbolSize: function (data) {
			// return 8 * Math.exp(-Math.sqrt(data[2])) + 4;
			return 4;
		},
		label: {
			emphasis: {
				show: true,
				formatter: function (param) {
					return param.data[3];
				},
				position: 'top'
			}
		},
		itemStyle: {
			normal: {
				shadowBlur: 10,
				shadowColor: 'rgba(120, 36, 50, 0.5)',
				shadowOffsetY: 5,
				color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
					offset: 0,
					color: 'rgb(251, 118, 123)'
				}, {
					offset: 1,
					color: 'rgb(204, 46, 72)'
				}])
			}
		}
	}]
};
myChart.setOption(option);
var macs = [];
interval = setInterval(function(){
	$.get('http://127.0.0.1:5000/allpos', function(result){
		var data = new Array(macs.length).fill(NaN);
		result.forEach(function(device){
			var index = macs.indexOf(device[3]);
			if (index === -1) {
				index = macs.length;
				macs[index] = device[3];
			}
			data[index] = device;
		});
		myChart.setOption({
			series: [{
				data: data
			}]
		});
	}, 'json');
}, 2000);
</script>
</body>
</html>